<!--
 * @Author: your name
 * @Date: 2020-12-23 16:54:45
 * @LastEditTime: 2021-04-01 14:25:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\service\api.vue
-->
<template>
    <div class="api-mian-box">
        <div class="content-box">
            <div class="h1-box">API：{{$t('device.inverter.js_real_time_Display')}} </div>
            <div> <span>{{$t('API.getButton')}}tokenID</span> <span v-if='tokenId' v-copy='apiUrl'>{{tokenId}}</span> <div v-if='!tokenId' @click='apiCreate' class="getToken-button">{{$t('API.getButton')}}</div></div>
            <div><span>{{$t('API.APIAddress')}}</span> <span v-if='apiUrl' v-copy='apiUrl'>{{apiUrl}}</span></div>
            <div><span>{{$t('API.APIDown')}}</span> <a @click='downloadModal' href="javascript:;" style="color:#3c8dbc;">{{$t('API.downLoadWord')}}</a></div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            tokenId:'',
            apiUrl:'',

        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.apiGetByUser()
    },
    methods: {
        async apiCreate(){
            let res = await this.API.apiCreate()
            if(this.comm.showMsg(res.success)){
                this.apiGetByUser()
            }
        },
        async apiGetByUser(){
            let res = await this.API.apiGetByUser()
            this.apiUrl = res.apiUrl && res.apiUrl+'&sn='
            this.tokenId = res.tokenId
        },
        downloadModal(){
            this.comm.windowOpen('/resource/files/userGuide/Solax_API.pdf')
        }
        
    },
};
</script>

<style  lang="less" scoped>
.api-mian-box{
    .h1-box{
        font-size:22px;
        font-weight: 900;
    }
    .content-box{
        margin-left:110px;
        div{
            margin-top: 40px;
            font-weight: 700;
            color:#4e4d52;
        }
    }
    .getToken-button, .copy-button {
        padding: 2px 8px;
        border: 1px solid #ccc;
        border-radius: 12px;
        color: #888;
        cursor: pointer;
        margin-left: 10px;
        display: inline;
    }
    .getToken-button:hover, .copy-button:hover {
        color: #ED7523;
        border: 1px solid #ED7523;
    }
}
</style>
